from dash import html, dcc, dash_table
import dash_bootstrap_components as dbc
import time
# import dash_table

# 设备台账页面布局
# 在布局的开始部分添加
layout = html.Div([
    dcc.Location(id='redirect-login', refresh=True),
    dcc.Store(id='url-equipment-category-store'),
    dcc.Store(id='url-price-range-store'),
    dcc.Store(id='url-params-trigger'),
    html.Link(
        rel='stylesheet',
        href='/static/css/equipment.css'
    ),
    dcc.Store(id='init-load-trigger', data=int(time.time()), storage_type='session'),
    dcc.Store(id='url-device-id-store', data=None),
    dcc.Store(id='auto-select-trigger-store', data=None),
    dcc.Store(id='url-org-store', data=None),
    # 页面标题
    # html.H2("设备台账管理", className="page-title mb-3"),

    # 查询条件区域（上方）
    html.Div([
        html.Div([
            html.Div([
                dcc.Dropdown(
                    id='hospital-filter',
                    options=[],
                    placeholder="医院",
                    multi=True,
                    searchable=True,
                    style={"minWidth": "120px", "height": "38px", "marginRight": "8px"}
                ),
                dcc.Dropdown(
                    id='hospital-dept-filter',
                    options=[],
                    placeholder="科室",
                    multi=True,
                    searchable=True,
                    style={"minWidth": "110px", "height": "38px", "marginRight": "8px"}
                ),
                dcc.Input(id="filter-device-id", type="text", placeholder="设备ID", style={"width": "90px", "height": "38px", "marginRight": "8px"}),
                dcc.Input(id="filter-product-code", type="text", placeholder="资产编号", style={"width": "110px", "height": "38px", "marginRight": "8px"}),
                dcc.Input(id="filter-device-name", type="text", placeholder="设备名称", style={"width": "110px", "height": "38px", "marginRight": "8px"}),
                dcc.DatePickerSingle(
                    id='purchase-date-start',
                    placeholder='入账开始日期',
                    style={"width": "110px", "height": "48px", "marginRight": "4px", "verticalAlign": "middle"}
                ),
                dcc.DatePickerSingle(
                    id='purchase-date-end',
                    placeholder='入账结束日期',
                    style={"width": "110px", "height": "48px", "marginRight": "28px", "verticalAlign": "middle"}
                ),
                dcc.Dropdown(
                    id='equipment-type-filter',
                    options=[],
                    placeholder="设备分类",
                    multi=True,
                    searchable=True,
                    style={"minWidth": "110px", "height": "38px", "marginRight": "8px"}
                ),
                dcc.Dropdown(
                    id='brand-filter',
                    options=[],
                    placeholder="品牌",
                    multi=True,
                    searchable=True,
                    style={"minWidth": "90px", "height": "38px", "marginRight": "8px"}
                ),
                dcc.Dropdown(
                    id='status-filter',
                    options=[
                        {"label": "全部", "value": ""},
                        {"label": "正常运行", "value": "0"},
                                                
                        {"label": "维修中", "value": "1"},
                        {"label": "停用", "value": "2"},
                        {"label": "报废", "value": "3"},
                    ],
                    placeholder="运行状态",
                    multi=False,
                    searchable=False,
                    style={"minWidth": "100px", "height": "38px", "marginRight": "8px"}
                ),
                dcc.Input(id='price-min', type='number', placeholder='最低价', style={"width": "110px", "height": "38px", "marginRight": "4px"}),
                dcc.Input(id='price-max', type='number', placeholder='最高价', style={"width": "110px", "height": "38px", "marginRight": "16px"}),
                html.Button("筛选", id="filter-button", className="btn btn-primary me-2", style={"height": "38px", "marginRight": "8px", "boxShadow": "1px 1px 3px #bbb"}),
                html.Button("重置", id="reset-button", className="btn btn-secondary", style={"height": "38px", "marginRight": "8px", "boxShadow": "1px 1px 3px #bbb"}),
                dcc.Download(id="export-data"),
                html.Form([
                    dcc.Input(id="hidden-device-ids", name="device_ids", type="hidden")
                ], id="download-qrcode-form", action="/equipment/generate_qrcodes", method="post", target="_blank", style={"display": "none"}),
                html.Button("导出当前列表", id="export-excel-btn", n_clicks=0, style={"height": "38px", "marginRight": "8px", "background": "#5cb85c", "color": "#fff", "border": "none", "boxShadow": "1px 1px 3px #bbb"}),
                html.Button("报修二维码", id="btn-generate-qrcodes", n_clicks=0, style={"height": "38px", "background": "#1976d2", "color": "#fff", "boxShadow": "1px 1px 3px #bbb"}),
                dbc.Modal([
                    dbc.ModalHeader("报修二维码"),
                    dbc.ModalBody(id="qrcode-modal-body"),
                ], id="qrcode-modal", is_open=False, size="xl"),
            ], style={
                "display": "flex",
                "flexWrap": "wrap",
                "alignItems": "center",
                "gap": "0.5rem"
            })
        ], className="filter-container", style={
            "width": "100%",
            "border": "1px solid #e0e0e0",
            "marginBottom": "12px",
            "padding": "14px 10px 10px 10px",
            "background": "#f4f6fa",
            "borderRadius": "8px",
            "boxShadow": "0 2px 8px #f0f1f2"
        })
    ], style={"width": "100%", "margin": "0 auto", "padding": "0 5px"}),

    # 设备列表区域（下方）
    html.Div([
        # 新增：监听 active_cell，实现点击整行跳转
        dcc.Location(id='detail-page-location', refresh=True),
        html.Div([
            # html.H5("设备列表", className="list-title"),
            dash_table.DataTable(
                id='equipment-table',
                columns=[
                    {"name": "设备ID", "id": "id"},
                    {"name": "设备名称", "id": "name"},
                    {"name": "资产编号", "id": "product_code"},
                    {"name": "设备分类", "id": "category"},
                    {"name": "品牌", "id": "brand"},
                    {"name": "所属机构", "id": "org_name"},
                    {"name": "科室", "id": "department"},
                    {"name": "入账日期", "id": "purchase_date"},
                    {"name": "价格(万)", "id": "price"},
                    {"name": "运行状态", "id": "status"},
                ],
                page_current=0,
                page_size=300,
                page_action='custom',
                sort_action='custom',
                sort_mode='multi',
                sort_by=[],
                filter_action='none',
                style_table={'overflowX': 'auto', 'height': 'calc(100vh - 320px)', 'overflowY': 'auto'},
                style_cell={
                    'textAlign': 'left',
                    'minWidth': '80px', 'width': '150px', 'maxWidth': '200px',
                    'overflow': 'hidden',
                    'textOverflow': 'ellipsis',
                    'borderRight': '1px solid #dee2e6'
                },
                style_cell_conditional=[
                    {
                        'if': {'column_id': 'status'},
                        'borderRight': 'none'
                    }
                ],
                style_header={
                    'backgroundColor': '#1a3a5f',
                    'color': '#ffffff',
                    'fontWeight': 'bold',
                    'borderRight': '1px solid #dee2e6'
                },
                style_header_conditional=[
                    {
                        'if': {'column_id': 'status'},
                        'borderRight': 'none'
                    }
                ],
                style_data_conditional=[
                    {
                        'if': {'row_index': 'odd'},
                        'backgroundColor': '#234a78'
                    },
                    {
                        'if': {'row_index': 'even'},
                        'backgroundColor': '#1a3a5f'
                    },
                    {
                        'if': {'state': 'active'},
                        'backgroundColor': '#e6f7ff',
                        'border': '1px solid #91d5ff'
                    }
                ],
                # 关键：去掉 row_selectable 和 selected_rows
                # row_selectable='single',
                # selected_rows=[]
            ),
            html.Div(id='pagination-info', className="pagination-info mt-2")
        ], className="list-container", style={"width": "100%", "border": "1px dashed #ccc", "padding": "10px"})
    ], style={"width": "100%", "margin": "0 auto", "padding": "0 5px"}),

    html.Div(style={"clear": "both"})
], className="equipment-page")

dcc.Location(id='detail-page-location', refresh=True),

# # # 设备详细信息展示模板
# def generate_equipment_detail(equipment_data):
#     """生成设备详细信息展示"""
#     if not equipment_data:
#         return html.H4("未找到设备信息", className="text-center text-muted mt-5")

<<<<<<< HEAD
    return html.Div([
        # 基本信息卡片
        html.Div([
            html.H6("基本信息", className="detail-section-title"),
            html.Div([
                html.Div([
                    html.P(f"设备ID: {equipment_data.get('product_id', '无')}"),
                    html.P(f"资产编号: {equipment_data.get('product_code', '无')}"),
                    html.P(f"设备名称: {equipment_data.get('name', '无')}"),
                    html.P(f"设备类别: {equipment_data.get('category', '无')}"),
                    html.P(f"设备类型: {equipment_data.get('type', '无')}"),
                ], className="detail-col", style={"width": "50%", "float": "left"}),
                html.Div([
                    html.P(f"品牌: {equipment_data.get('brand', '无')}"),
                    html.P(f"型号: {equipment_data.get('model', '无')}"),
                    html.P(f"所属医院: {equipment_data.get('org_name', '无')}"),
                    html.P(f"采购日期: {equipment_data.get('purchase_date', '无')}"),
                    html.P(f"价格: {equipment_data.get('price', '无')}元"),
                ], className="detail-col", style={"width": "50%", "float": "left"}),
                html.Div(style={"clear": "both"})
            ], className="detail-row")
        ], className="detail-section"),
=======
#     return html.Div([
#         # 基本信息卡片
#         html.Div([
#             html.H6("基本信息", className="detail-section-title"),
#             html.Div([
#                 html.Div([
#                     html.P(f"设备ID: {equipment_data.get('product_id', '无')}"),
#                     html.P(f"资产编号: {equipment_data.get('product_code', '无')}"),
#                     html.P(f"设备名称: {equipment_data.get('name', '无')}"),
#                     html.P(f"设备类别: {equipment_data.get('category', '无')}"),
#                     html.P(f"设备类型: {equipment_data.get('type', '无')}"),
#                 ], className="detail-col", style={"width": "50%", "float": "left"}),
#                 html.Div([
#                     html.P(f"品牌: {equipment_data.get('brand', '无')}"),
#                     html.P(f"型号: {equipment_data.get('model', '无')}"),
#                     html.P(f"所属医院: {equipment_data.get('org_name', '无')}"),
#                     html.P(f"采购日期: {equipment_data.get('purchase_date', '无')}"),
#                     html.P(f"价格: {equipment_data.get('price', '无')}万元"),
#                 ], className="detail-col", style={"width": "50%", "float": "left"}),
#                 html.Div(style={"clear": "both"})
#             ], className="detail-row")
#         ], className="detail-section"),
>>>>>>> 37cb712a95dd04db58e55fc3cfb5be922b283b70

#         # 技术参数卡片
#         html.Div([
#             html.H6("技术参数", className="detail-section-title"),
#             html.Div([
#                 html.Div([
#                     html.P(f"软件版本: {equipment_data.get('software_version', '无')}"),
#                     html.P(f"硬件版本: {equipment_data.get('hardware_version', '无')}"),
#                 ], className="detail-col", style={"width": "50%", "float": "left"}),
#                 html.Div([
#                     html.P(f"网络地址: {equipment_data.get('network_address', '无')}"),
#                     html.P(f"使用年限: {equipment_data.get('service_life', '无')}年"),
#                 ], className="detail-col", style={"width": "50%", "float": "left"}),
#                 html.Div(style={"clear": "both"})
#             ], className="detail-row"),
#             html.P(f"技术参数: {equipment_data.get('technical_parameters', '无')}")
#         ], className="detail-section"),

#         # 厂商信息卡片
#         html.Div([
#             html.H6("厂商信息", className="detail-section-title"),
#             html.Div([
#                 html.Div([
#                     html.P(f"生产厂家: {equipment_data.get('manufacturer', '无')}"),
#                     html.P(f"厂家所在国: {equipment_data.get('manufacturer_country', '无')}"),
#                     html.P(f"生产日期: {equipment_data.get('production_date', '无')}"),
#                 ], className="detail-col", style={"width": "50%", "float": "left"}),
#                 html.Div([
#                     html.P(f"出厂日期: {equipment_data.get('factory_date', '无')}"),
#                     html.P(f"厂家代表人: {equipment_data.get('factory_representative', '无')}"),
#                     html.P(f"厂家联系方式: {equipment_data.get('factory_contact_info', '无')}"),
#                 ], className="detail-col", style={"width": "50%", "float": "left"}),
#                 html.Div(style={"clear": "both"})
#             ], className="detail-row")
#         ], className="detail-section"),

#         # 运行状态卡片
#         html.Div([
#             html.H6("运行状态", className="detail-section-title"),
#             html.Div([
#                 html.Div([
#                     html.P(f"运行状态: {equipment_data.get('running_status', '无')}"),
#                     html.P(f"上次维护日期: {equipment_data.get('last_maintenance_date', '无')}"),
#                     html.P(f"下次维护日期: {equipment_data.get('next_maintenance_date', '无')}"),
#                 ], className="detail-col", style={"width": "50%", "float": "left"}),
#                 html.Div([
#                     html.P(f"维护次数: {equipment_data.get('maintenance_count', '无')}"),
#                     html.P(f"故障次数: {equipment_data.get('fault_count', '无')}"),
#                     # html.P(f"完好率: {equipment_data.get('completion_rate', '无')}%"),
#                 ], className="detail-col", style={"width": "50%", "float": "left"}),
#                 html.Div(style={"clear": "both"})
#             ], className="detail-row")
#         ], className="detail-section")
#     ], className="equipment-details")





